<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-09-27 17:43:02
 * @LastEditors: 贺楠 1071780426@qq.com
 * @LastEditTime: 2024-06-21 09:37:34
 * @FilePath: \mould\src\components\BehaViorManage\feedbackListText\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <!-- 小弹框 width:500,height:0.3,top:15%  -->
  <!-- 中弹框 width:800,height:0.5,top:10% -->
  <!-- 大弹框 width:1060,height:0.76,top:5% -->

  <div class="Control-1 mechanism_dialogS closure" id="comcn small">
    <el-dialog
      width="1060px"
      :title="title"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-background="rgba(0, 0, 0, 0.2)"
      element-loading-spinner="el-icon-loading"
      v-dialogDrag
      :visible.sync="visible"
      @close="closeDialog"
      :append-to-body="true"
      top="5%"
    >
      <div
        class="dialogBody common commonClassDialog moduleDialog"
        :style="{ height: dialogHeight }"
        style="width: 100%"
      >
        <div style="height: 100%">
          <div class="tab">
            <div
              v-for="(data, index) in typeData"
              :key="data.value"
              @click="changeType($event, index)"
            >
              <div
                class="btn"
                :style="{
                  color:
                    data.show === true ? 'rgba(0, 117, 255, 1)' : '#343639',
                  background: data.show === true ? '#E0EFFF' : '#fff',
                }"
              >
                {{ data.text }}
              </div>
            </div>
          </div>
          <div
            class="charts"
            v-if="typeData[0].show"
            style="
              overflow: hidden;
              margin-bottom: 20px;
              display: flex;
              flex-direction: column;
            "
          >
            <div class="baseTitle" style="margin-top: 8px; display: flex">
              <div style="width: 150px; line-height: 45px">
                设备名称：{{ currentDetail.fAd }}
              </div>
              <div class="mechanism_nav_left" style="width: 250px">
                <publicForm
                  ref="publicForm"
                  @yj_searchForm="getDetail"
                  lableWidth="110px"
                  :formObj="searchObj"
                  :formData="getList"
                  @selectChange="selectTime"
                >
                </publicForm>
              </div>
            </div>
            <div class="realTime">
              <div
                class="left"
                v-if="
                  currentDetail.fTemperature.substr(1, 4) >= currentDetail.TemperatureMin &&
                  currentDetail.fTemperature.substr(1, 4) <= currentDetail.TemperatureMax
                "
              >
                <div class="icon"></div>
                <div class="title">
                  <div class="titleTop">相对温度</div>
                  <div class="titleNum">
                    {{ currentDetail.fTemperature }}<span class="unit">℃</span>
                  </div>
                </div>
                <div class="range">
                  <div class="top">最大值 {{currentDetail.TemperatureMax}}℃</div>
                  <div class="bottom">最小值 {{currentDetail.TemperatureMin}}℃</div>
                </div>
              </div>
              <div
                class="left"
                v-else-if="currentDetail.fTemperature.substr(1, 4) == ''"
              >
                <div class="icon"></div>
                <div class="title">
                  <div class="titleTop">相对温度</div>
                  <div class="titleNum">暂无数据</div>
                </div>
                <div class="range">
                  <div class="top">最大值 {{currentDetail.TemperatureMax}}℃</div>
                  <div class="bottom">最小值 {{currentDetail.TemperatureMin}}℃</div>
                </div>
              </div>
              <div class="left1" v-else>
                <div class="img">
                  <div class="imag">
                    <div class="img2"></div>
                  </div>
                </div>
                <div class="title">
                  <div class="titleTop">相对温度</div>
                  <div class="titleNum">
                    {{ currentDetail.fTemperature }}<span class="unit">℃</span>
                  </div>
                </div>
                <div class="range">
                  <div class="top">最大值 {{currentDetail.TemperatureMax}}℃</div>
                  <div class="bottom">最小值 {{currentDetail.TemperatureMin}}℃</div>
                </div>
              </div>
              <div class="right"  v-if="
                  currentDetail.fHumidity.substr(1, 4) >= currentDetail.Humidity &&
                  currentDetail.fHumidity.substr(1, 4) <= 100
                ">
                <div class="icon"></div>
                <div class="title">
                  <div class="titleTop">相对湿度</div>
                  <div class="titleNum">
                    {{ currentDetail.fHumidity.substr(1, 4) }}<span class="unit">%</span>
                  </div>
                </div>
                <div class="range">
                  <div class="top">最大值 100%</div>
                  <div class="bottom">最小值 {{currentDetail.Humidity}}%</div>
                </div>
              </div>
              <div class="right"  v-else-if="
                  currentDetail.fHumidity.substr(1, 4)==''
                ">
                <div class="icon"></div>
                <div class="title">
                  <div class="titleTop">相对湿度</div>
                  <div class="titleNum">
                    {{ currentDetail.fHumidity.substr(1, 4) }}<span class="unit">%</span>
                  </div>
                </div>
                <div class="range">
                  <div class="top">最大值 100%</div>
                  <div class="bottom">最小值 {{currentDetail.Humidity}}%</div>
                </div>
              </div>
              <div class="right1"  v-else>
                <div class="img">
                  <div class="imag1">
                    <div class="img2"></div>
                  </div>
                </div>
                <div class="title">
                  <div class="titleTop">相对湿度</div>
                  <div class="titleNum">
                    {{ currentDetail.fHumidity.substr(1, 4) }}<span class="unit">%</span>
                  </div>
                </div>
                <div class="range">
                  <div class="top">最大值 100%</div>
                  <div class="bottom">最小值 {{currentDetail.Humidity}}%</div>
                </div>
              </div>

            </div>
            <div class="jipeiBoxs">
              <myCharts :commonData="chartsData" :loading="loadings"></myCharts>
            </div>
          </div>

          <div
            class="charts"
            v-if="typeData[1].show"
            style="overflow: hidden; margin-bottom: 20px"
          >
            <div class="baseTitle" style="margin-top: 8px; display: flex">
              <div style="width: 150px; line-height: 45px">
                设备名称：{{ currentDetail.fAd }}
              </div>
              <div class="mechanism_nav_left" style="width: 250px">
                <publicForm
                  ref="publicForm"
                  @yj_searchForm="getDetail"
                  lableWidth="110px"
                  :formObj="searchObj"
                  :formData="getList"
                  @selectChange="selectTime"
                >
                </publicForm>
              </div>
            </div>
            <div
              style="margin-top: 8px; height: 90%; box-sizing: border-box"
              class="lqlevelClass"
            >
              <tableData
                :page="getList.page"
                :pageSize="getList.pageSize"
                height="100%"
                :totalNum="15"
                :pageSizes="[15, 30, 45, 60]"
                :pageSize1="15"
                :config="table_config"
                :dataList="tableData"
                :loading="loading"
                :info="queryCriteriaData"
                :total="queryCriteriaData.total"
                :pageNum.sync="getList.page"
                :limit.sync="getList.pageSize"
                @pagination="getDetail(getList)"
              />
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./index.js"></script>
<style lang="less" scoped>
@import "./index.less";
</style>
